<template>
	<div id="content">
		<div class="content-news">
			<div class="banner">
				<ul class="clearfix">
					<!-- <router-link tag="li" to="/detail/1?collectionName=banner"> -->
					<li>
						<img src="../assets/img/banner.png" alt="" />
						<!-- </router-link> -->
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
				</ul>
			</div>

			<div>
				<div class="news_c">
					<div>
						<span style="line-height: 1;padding-left:4px;margin-left:10px;display: inline-block;border-left: 3px solid #e60012">社区公告</span>
						<a style="float: right;font-size: 12px;font-weight: 500;" href="more_news.html"><span class="news_more">更多</span></a>
					</div>
				</div>
				<div class="news_con">
					<div class="news_video">
						<router-link
						tag="p"
						:to="`/detail_message/${item._id}?collectionName=news_bulletin`" 
						v-for="(item,index) of news_bulletin"
						:key="item._id"
						style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;"
						>
							<!-- <p > -->
							{{item.title}}
								<!-- 关于开展2020年北京市留学人员回国创业启动支持计划申报和高层次留学人才回国资助试点工作的通知 -->
						</router-link>
					<!-- 	<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								关于开展2020年北京市留学人员回国创业启动支持计划申报和高层次留学人才回国资助试点工作的通知</p>
						</a> -->
						<!-- <a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								协会发布 | 关于公布私募投资基金备案申请材料清单的通知</p>
						</a>
						<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								@入驻机构 关于便利申请办理私募基金管理人登记相关事宜的通知</p>
						</a>
						<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								关于征集2020年非京籍应届毕业生落户需求的通知</p>
						</a>
						<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								2019年第7号公告</p>
						</a> -->
					</div>
				</div>
				<div class="news_c_2">
					<div>
						<span style="line-height: 1;padding-left:4px;margin-left:10px;display: inline-block;border-left: 3px solid #e60012">社区通知</span>
						<a style="float: right;font-size: 12px;font-weight: 500;" href="more_news.html"><span class="news_more">更多</span></a>
					</div>
				</div>
				<div class="news_con">
					<div class="news_video">
						<router-link
						tag="p"
						:to="`/detail_message/${item._id}?collectionName=news_message`" 
						v-for="(item,index) of news_message"
						:key="item._id"
						style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;"
						>
							<!-- <p > -->
							{{item.title_w}}
								<!-- 关于开展2020年北京市留学人员回国创业启动支持计划申报和高层次留学人才回国资助试点工作的通知 -->
								</router-link>
						<!-- <a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								协会发布 | 关于公布私募投资基金备案申请材料清单的通知</p>
						</a> -->
						<!-- <a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								@入驻机构 关于便利申请办理私募基金管理人登记相关事宜的通知</p>
						</a>
						<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								关于征集2020年非京籍应届毕业生落户需求的通知</p>
						</a>
						<a href="">
							<p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border-bottom: 1px dashed #dddddd;">
								2019年第7号公告</p>
						</a> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 缺失依赖，可以npm i 安装   , 注意版本的坑
	// 缺失的依赖，npm i 安装不到，（公司内部库）
	import $ from 'jquery';
	import Swipe from '../assets/js/swipe.js';
	export default {
		name: 'home',
		props: {},
		data() {
			return {
				news_message: {},
				news_bulletin:{}
				
			};
		},
		components: {},
		mounted() {
			new Swipe($('.banner')[0], {
				auto: 1500,
				continuous: true,
				stopPropation: true,
				callback: function(index, element) {
					$('.banner ol li').removeClass('active');
					$('.banner ol li')
						.eq(index)
						.addClass('active');
				}
			});
			this.$axios.all([
				this.$axios.get('/api/list/news_message'),
				this.$axios.get('/api/list/news_bulletin',{params:{_page:1,_limit:4}}),
			]).then(
				this.$axios.spread((news_message,news_bulletin) => { 
					//所有数据回来，在渲染页面
					this.news_message = news_message.data;
					this.news_bulletin = news_bulletin.data;
					console.log(this.news_message)
				})
			)
		},
		updated() {},
		methods: {}
	};
</script>

<style scoped>
	.content .banner {
		margin-top: 0.6rem;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}
	
	.banner ul li {
		padding-top: 20px;
		width: 6.4rem;
		float: left;
		position: relative;
	}
	
	.banner ul li img {
		width: 100%;
		display: block;
	}
	
	.banner ul li .text-box {
		width: 5.8rem;
		padding: 0 0.3rem;
		height: 1.24rem;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}
	/*  */
	a {
	  color: #555;
	  text-decoration: none; }
	.news_video {
		padding: 8px;
		line-height: 2.2;
	}

	.news_con {
		background-color: #ffffff;
		padding: 10px 12px 4px;
		margin-bottom: 6px;
	}

	.news_c {
		padding-left: 10px;
		padding-top: 10px;
		padding-right: 1.3em;
	}

	.news_c_2 {
		padding-left: 10px;
		padding-top: 0;
		padding-right: 1.3em;
	}
	.headlunbo {
		/* height: 10em; */
		width: 100%;
		background-color: #007AFF;
	}
	
	.swiper-container {
		width: 100%;
		height: 100%;
		margin: auto;
	}
	
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.img_b {
		width: 100%;
		height: 100%;
	}
	
	.tabbable {
		line-height: 1.2em;
		padding-top: 0em;
	}
	
	.tab_t {
		font-weight: 600;
		font-size: 1.2em;
		margin-top: 0.7em;
		margin-left: 1.2em;
		padding-bottom: 0.6em;
	}
	
	.pa_t {
		position: relative;
	}
	
	.pa_t>li {
		width: 7em;
		/* background-color: #007AFF; */
	
	}
	
	.tab_t>a {
		color: #343434 !important;
		;
		text-decoration: none;
	}
	
	.active {
		/* color: #43a1f8 !important; */
		/* border-bottom: 0.2px solid #007AFF;
						 /* background-color: #4ea2f2; */
	
	
	}
	
	.active::after {
		content: '';
		width: 20%;
		display: block;
		margin: 0 auto;
		border-bottom: 0.3em solid #007AFF;
	}
	
	.active2::after {
		border-bottom: 0em solid #007AFF;
	}
</style>
